<template>
	
	<view id="app" style="padding-top:0rem;background-color: #F5F5F5;z-index: 9999999;" @touchmove.stop.prevent="clear">
    <view class="popup_showGoods">
      <view class="top_set">
        <view class="title">
          已选商品
        </view>
        <view class="del flex" @click="emptyCartList">
           <image src="/static/del.png" mode=""></image>
          清空
        </view>
      </view>

        <scroll-view scroll-y="true" class="goods_list" style="max-height:45vh;">
        <view class="goods_item" v-for="(item, index) in props.good_list" :key="index">
          <view class="item_img">
            <image v-if="item.product_image" :src="item.product_image" mode=""></image>
            <image v-else src="../../static/images/my/noPictures.png" mode=""></image>
          </view>
          <view class="item_info">
            <view class="item_title">
              {{ item.product_name }}
            </view>
            <view class="item_sku" v-if="item.diy_attribute">
              <text class="item_title" style="font-size: 25rpx;font-weight: normal;">规格：</text>
              {{ item.diy_attribute }}
            </view>
            <view class="item_sku"
                  v-if="item.product_mj || item.product_width || item.product_thickness">
              <text class="item_title" style="font-size: 25rpx;font-weight: normal;">尺寸：</text>
              <text v-if="item.product_mj">{{ item.product_mj }}<text
                  v-if="item.product_width">×</text> </text>
              <text v-if="item.product_width">{{ item.product_width }}<text
                  v-if="item.product_thickness">×</text></text>
              <text v-if="item.product_thickness">{{ item.product_thickness }}</text>


              <text v-if="item.pcs_dj == 'SQUARE' && item.product_mj && item.product_width"
                    style="margin-left: 30rpx;color: #555;">{{
                  Number(item.product_mj) *
                  Number(item.product_width) / 1000000 }}㎡</text>
              <text v-if="item.pcs_dj === 'PCS' && item.product_mj"
                    style="margin-left: 30rpx;color: #555;">{{
                  (Number(item.product_mj) *
                      1000) / 1000000 }}m</text>
            </view>
            <view class="item_price" style="display:flex;align-items:center;">
              <view class="item_price_left prine">
                <nut-price :price="item.product_price" size="normal" symbol="¥"/>
                <nut-price v-if="item.pcs_dj == 'SQUARE' && item.product_mj && item.product_width"
                           style="margin-left: 30rpx;" :price="(Number(item.product_mj) *
												Number(item.product_width) / 1000000) * Number(item.product_price)" size="small" symbol="¥" />
                <nut-price v-if="item.pcs_dj === 'PCS' && item.product_mj"
                           style="margin-left: 30rpx;" :price="((Number(item.product_mj) *
												1000) / 1000000) * Number(item.product_price)" size="small" symbol="¥" />
              </view>
              <view class="item_price_right" style="width:135px;">
                <InputNumber :value="Number(item.fact_num)" @onAdd="goods_add(item)"
                             @onSub="goods_sub(item)" @onInput="goods_input($event, item)" :size="50" style="width:135px;"/>
              </view>
<!--              <view style="display: flex;align-items: center;font-weight: bold;">
                <view style="font-size: 28rpx;color:#DB3922;margin-right:30rpx;font-weight: normal;" v-if="item.qdl>1">
                  ({{item.qdl}}件起订)
                </view>
                <nut-input-number  :step='1' :min="item.qdl" v-model="item.fact_num" button-size="30"
                                   input-width="50" @change="change(item)"/>
              </view>-->
            </view>
          </view>

      </view>

  </scroll-view>

    </view>
      <div class="product-footer">
          <view style="display: flex;align-items: center;justify-content: space-between;">
              <view style="font-size:24rpx;color:#E3391F;">合计：
                  <nut-price :price="totalAmount" :decimal-digits="2" :thousands="false"/>
              </view>
          </view>
          <view style="margin-top: 5px">
              <nut-button  block type="primary" @click="go_settle">去结算</nut-button>
          </view>
      </div>
	  <!-- 页面结束 -->
	</view>
	
</template>

<script setup>
import {computed, onMounted, ref} from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
import {addCart, FormWork, Proname} from "../../api/api";
import InputNumber from '../../components/input_number/input_number.vue'

const emit = defineEmits(['closeCart','refreshCartGoods','go_settlement'])

const props = defineProps({
  good_list:{ //购物车内产品列表
    type: Array
  }
})
const clear = ()=>{
}
// 清空购物车
const emptyCartList = async () => {
  uni.showModal({
    title: '提示',
    content: '确定清空购物车吗？',
    success: (res) => {
      if (res.confirm) {
        emptyCart();
      }else if (res.cancel) {
        console.log('取消清除购物车')
      }
    }
  });

}

const emptyCart = async () => {
  let session = uni.getStorageSync('session')
  let params = {
    proname: 'INWX01',
    back_code: `XS${session.DWDM}`,
    action: 'update'
  }
  console.log("清空购物车请求报文",params);
  let res = await FormWork(params)
  console.log("清空购物车响应报文",res);
  if (res.result == 'ok') {
    emit('refreshCartGoods')
  } else {
    uni.showModal({
      title: '操作失败！',
      icon: 'none'
    })
  }
}

// 结算总价格
const totalAmount = computed(() => {
  let a = 0
  // 通过计算不同的 类型
  let SQUARE = 0
  let CUBE_DIY = 0
  let PCS = 0
  props.good_list.forEach((item, index) => {
    // 计算平方
    if (item.pcs_dj == "SQUARE" && item.product_mj && item.product_width) {
      // 计算宽度和长度
      SQUARE = SQUARE + ((Number(item.product_mj) * Number(item.product_width) / 1000000) * Number(item.product_price)) * Number(item.fact_num)
    } else if (item.pcs_dj == "PCS" && item.product_mj) {
      // 计算平方
      PCS = PCS + (((Number(item.product_mj) * 1000) / 1000000) * Number(item.product_price)) * Number(item.fact_num)
    } else {
      a = a + Number(item.fact_num) * Number(item.product_price)
    }
  })
  return SQUARE + CUBE_DIY + PCS + a
})

const goods_add = (val) => {
  // pcs_dj = "PACK"  装箱  取pack_num
  if (val.pcs_dj == 'PACK') {
    val.fact_num = Number(val.fact_num) + Number(val.pack_num)
  } else {
    val.fact_num = Number(val.fact_num) + 1
  }
}
const goods_sub = (val) => {
  // 判断是否整箱发货
  if (val.pcs_dj == 'PACK') {
    val.fact_num = Number(val.fact_num) - Number(val.pack_num)
    if (val.fact_num == 0) {
      let session = uni.getStorageSync('session')
      uni.showModal({
        title: '提示',
        content: '确定删除该商品吗！',
        // showCancel: false,
        success: (modal) => {
          if (modal.confirm) {
            FormWork({
              d_product_id: val.id,
              back_code: 'XS' + session.DWDM,
              action: 'call',
              proname: 'IN0K07',
            }).then(res => {
              console.log(res);
              if (res.result == 'ok') {
                uni.showToast({
                  title: '删除成功',
                  icon: 'none'
                })
                //getCartList()
                emit('refreshCartGoods');
              }
            })
          } else {
            // 把值还原
            val.fact_num = Number(val.fact_num) + Number(val.pack_num)
          }
        }
      })
    }
  } else {
    val.fact_num = Number(val.fact_num) - 1
    if (Number(val.fact_num) <= 0) {
      let session = uni.getStorageSync('session')
      uni.showModal({
        title: '提示',
        content: '确定删除该商品吗！',
        // showCancel: false,
        success: (modal) => {
          if (modal.confirm) {
            FormWork({
              d_product_id: val.id,
              back_code: 'XS' + session.DWDM,
              action: 'call',
              proname: 'IN0K07',
            }).then(res => {
              console.log(res);
              if (res.result == 'ok') {
                uni.showToast({
                  title: '删除成功',
                  icon: 'none'
                })
                //getCartList()
                emit('refreshCartGoods')
              }
            })
          } else {
            // 把值还原
            val.fact_num = Number(val.fact_num) +1
          }
        }
      })

    }
  }
}
const goods_input = (e, val) => {
  let init = val
  // pcs_dj = "PACK"  装箱  取pack_num
  // 并且按 pack_num 倍数添加
  if (val.pcs_dj == 'PACK') {
    // 判断 e 是否是 pack_num 的倍数
    if (Number(e.detail.value) % val.pack_num != 0) {
      uni.showModal({
        title: '修改',
        content: '当前值不属于' + val.pack_num + '的倍数,是否帮你修改？',
        success: function (res) {
          if (res.confirm) {
            // 取余数，再通过倍数减去，得出差值，再补起
            let ak = Number(val.pack_num) - (Number(e.detail.value) % Number(val.pack_num))
            val.fact_num = Number(e.detail.value) + ak
          } else {
            // 把值还原
            console.log(init);
            val.fact_num = init.fact_num
          }
        }
      })
    }
  }else {
    // 如果输入的值是负数或零,则判断
    if (Number(e.detail.value) <= 0) {
      let session = uni.getStorageSync('session')
      uni.showModal({
        title: '提示',
        content: '确定删除该商品吗！',
        // showCancel: false,
        success: (modal) => {
          if (modal.confirm) {
            FormWork({
              d_product_id: val.id,
              back_code: 'XS' + session.DWDM,
              action: 'call',
              proname: 'IN0K07',
            }).then(res => {
              console.log(res);
              if (res.result == 'ok') {
                uni.showToast({
                  title: '删除成功',
                  icon: 'none'
                })
                //getCartList()
                emit('refreshCartGoods')
              }
            })
          } else {
            // 零就赋值为1，负数就转正
            e.detail.value =  e.detail.value ? Math.abs(e.detail.value) :1
            val.fact_num =  e.detail.value ? Math.abs(e.detail.value) :1
          }
        }
      })

    }
    // 正数则输入多少赋值多少
    val.fact_num = Number(e.detail.value)
  }
}

const go_settle=()=>{
  emit('go_settlement');
}

</script>


<style scoped lang="scss">
.popup_showGoods{
  overflow: auto;
  z-index: 999;
  // height: 70vh;
  max-height: 70vh;
  .top_set{
    font-size: 26rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #efefef;
    .del{
      display: flex;
      align-items: center;
      image{
        margin-right: 10rpx;
        width: 35rpx;
        height:35rpx;
      }
      font-size: 26rpx;
      color: #9b9b9b;
    }
  }
  .goods_list::-webkit-scrollbar {
    display: none;
  }
  .goods_list{
    overflow-y: auto;
    // height: calc(70vh - 136rpx);
    max-height: calc(70vh - 136rpx);
    .goods_item:last-child{
      margin-bottom: 2rpx;
    }
    .goods_item{
      padding: 20rpx;
      display: flex;
      border-bottom: 1px solid #efefef;
      .item_img{
        flex: 2.5;
        image{
          width: 140rpx;
          height: 140rpx;
          border-radius: 20rpx;
        }
      }
      .item_info{
        flex: 7;
        padding: 0 0 0 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .item_title{
          font-weight: 600;
          font-size: 28rpx;
        }
        .item_sku{
          font-size: 24rpx;
          color: #9b9b9b;
          flex: 1;
          padding-top: 5rpx;

        }
        .item_price{
          font-size: 25rpx;
          color: #f24839;
          display: flex;
          align-items: center;
          justify-content: space-between;
          text{
            font-size: 32rpx;
            font-weight: 600;
          }
        }
      }
    }
  }
}
.product-footer{
  background-color: #fff;
  padding:20rpx;
  padding-bottom: 0;
  //position: fixed;
  bottom:22px;
  width:94%;
}
</style>